<!-- Created by mhy on 2018/6/27.

 -->
<template>
  <div class="frame-new-page" style="background-color: #F2F2F2">
    <div class="frame-header">
    </div>
    <div class="frame-content">
      <div class="frame-left">
        <div class="frame-left-dist" style="margin-bottom: 20px "></div>
        <m-select v-model="value1" :options="options1" title="状态" class="m-mb-10"/>
        <m-select v-model="value2" :options="options2" title="色系" class="m-mb-10"/>
        <m-select v-model="value3" :options="options3" title="风格" class="m-mb-10"/>
        <m-select v-model="value4" :options="options4" title="付费类型" class="m-mb-10"/>
        <div class="frame-left-dist" style="margin-top: 20px"></div>
        <p class="frame-left-add-factory" v-show="factoryid.length>0" style="color: #303641">厂家id号：{{factoryid}}</p>
        <p class="frame-left-add-factory" v-show="factoryname.length>0" style="color: #303641">厂家名称：{{factoryname}}</p>
        <p class="frame-left-add-factory" v-show="seqid.length>0" style="color: #303641">厂家框条编号：{{seqid}}</p>
        <p class="frame-left-add-factory" @click="alertfactory">+{{seqid.length > 0 ? '修改' : '新增'}}关联厂家编号</p>
        <p class="frame-left-add-factory" v-show="seqid.length>0" @click="deletefactory" style="color: red">移除厂家信息</p>
        <button class="frame-left-operation" style="background-color: #39B866;color: white;" @click="save">发布</button>
        <button class="frame-left-operation" style="margin-top: 30px;background-color: #F8F8F8;border: #050505 solid 0.3pt;" @click="close">关闭</button>
      </div>
      <div class="frame-right">
        <div class="frame-right-header">
        </div>
        <div class="frame-right-mode" style="margin-top: 0px">
          <p class="frame-right-mode-title">*名称（必填）</p>
          <input class="frame-right-mode-input" maxlength="30" v-model="infoname" placeholder="请输入名称，30个字符以内">
        </div>
        <div class="frame-right-mode">
          <p class="frame-right-mode-title">*宽（cm）</p>
          <input class="frame-right-mode-input" v-model="width" placeholder="4位以内数字">
        </div>
        <div class="frame-right-mode">
          <p class="frame-right-mode-title">*厚（cm）</p>
          <input class="frame-right-mode-input" v-model="height" placeholder="4位以内数字">
        </div>
        <div class="frame-right-mode">
          <p class="frame-right-mode-title">*内凹（cm）</p>
          <input class="frame-right-mode-input" v-model="inout" placeholder="4位以内数字">
        </div>
        <div class="frame-right-dist" ></div>
        <div class="frame-right-img-sep" >
          <div class="frame-right-radious">
            <div class="title-warning" style="height: 0;margin: 0">
              <p class="upload-img-title">*角图：（375*375像素）</p>
              <p class="warining-radious" ref="war1"></p>
              <p class="img-info" ref="info1"></p>
            </div>
            <div class="frame-right-img-content" style="background-color: white">
              <img  src=""  ref="img1" class="img-show">
              <p class="img-sign" ref="img-sign1">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput1"
                @change="onChange($event, 1)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
          </div>
          <div class="frame-right-radious" >
            <div class="title-warning" style="height: 0;margin: 0">
              <p class="upload-img-title">材质截面图：(375*375像素)(可选)</p>
              <p class="warining-radious" ref="war2"></p>
              <p class="img-info" ref="info2"></p>
            </div>
            <div class="frame-right-img-content" style="background-color: white">
              <img  src=""  ref="img2" class="img-show">
              <p class="img-sign" ref="img-sign3">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput2"
                @change="onChange($event, 2)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
              <p class="img-sign" style="background-color: red;color: white;right: 100px" @click="deleteImg(2)" ref="img-delete-sign13">删除</p>
            </div>
          </div>
        </div>
        <div class="frame-right-dist" ></div>
        <p class="frame-right-mode-title img-mode" style="align-self: flex-start;margin-left: 5%">*S（最低长度要求：2000像素）</p>
        <div class="frame-right-img-size">
          <div class="img-aroud">
            <div class="title-warning">
              <p class="upload-img-title">a面:</p>
              <p class="warining-radious" ref="war3">{{imgLengthIsSuit[2] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info3">图片长度：{{imgLengthReal[2]}}</p>
            </div>
            <div class="frame-right-img-content  sub-img">
              <img  src=""  ref="img3" class="img-show">
              <p class="img-sign" ref="img-sign3">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput3"
                @change="onChange($event, 3)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
            <div class="img-dist"></div>
            <div class="title-warning">
              <p class="upload-img-title">b面:</p>
              <p class="warining-radious" ref="war4">{{imgLengthIsSuit[3] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info4">图片长度：{{imgLengthReal[3]}}</p>
            </div>
            <div class="frame-right-img-content sub-img" >
              <img  src=""  ref="img4" class="img-show">
              <p class="img-sign" ref="img-sign4">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput4"
                @change="onChange($event, 4)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
          </div>
        </div>
        <div class="frame-right-dist"></div>
        <p class="frame-right-mode-title img-mode" style="align-self: flex-start;margin-left: 5%">*M（最低长度要求：3200像素）</p>
        <div class="frame-right-img-size">
          <div class="img-aroud">
            <div class="title-warning">
              <p class="upload-img-title">a面:</p>
              <p class="warining-radious" ref="war5">{{imgLengthIsSuit[4] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info5">图片长度：{{imgLengthReal[4]}}</p>
            </div>
            <div class="frame-right-img-content  sub-img">
              <img  src=""  ref="img5" class="img-show">
              <p class="img-sign" ref="img-sign5">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput5"
                @change="onChange($event, 5)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
            <div class="img-dist"></div>
            <div class="title-warning">
              <p class="upload-img-title">b面:</p>
              <p class="warining-radious" ref="war6">{{imgLengthIsSuit[5] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info6">图片长度：{{imgLengthReal[5]}}</p>
            </div>
            <div class="frame-right-img-content sub-img" >
              <img  src=""  ref="img6" class="img-show">
              <p class="img-sign" ref="img-sign6">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput6"
                @change="onChange($event, 6)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
          </div>
        </div>
        <div class="frame-right-dist"></div>
        <p class="frame-right-mode-title img-mode" style="align-self: flex-start;margin-left: 5%">*L（最低长度要求：6100像素）</p>
        <div class="frame-right-img-size">
          <div class="img-aroud">
            <div class="title-warning">
              <p class="upload-img-title">a面:</p>
              <p class="warining-radious" ref="war7">{{imgLengthIsSuit[6] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info7">图片长度：{{imgLengthReal[6]}}</p>
            </div>
            <div class="frame-right-img-content  sub-img">
              <img  src=""  ref="img7" class="img-show">
              <p class="img-sign" ref="img-sign7">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput7"
                @change="onChange($event, 7)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
            <div class="img-dist"></div>
            <div class="title-warning">
              <p class="upload-img-title">b面:</p>
              <p class="warining-radious" ref="war8">{{imgLengthIsSuit[7] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info8">图片长度：{{imgLengthReal[7]}}</p>
            </div>
            <div class="frame-right-img-content sub-img" >
              <img  src=""  ref="img8" class="img-show">
              <p class="img-sign" ref="img-sign8">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput8"
                @change="onChange($event, 8)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
          </div>
        </div>
        <div class="frame-right-dist"></div>
        <p class="frame-right-mode-title img-mode" style="align-self: flex-start;margin-left: 5%">XL（最低长度要求：8600像素）(成对上传)</p>
        <div class="frame-right-img-size">
          <div class="img-aroud">
            <div class="title-warning">
              <p class="upload-img-title">a面:</p>
              <p class="warining-radious" ref="war9">{{imgLengthIsSuit[8] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info9">图片长度：{{imgLengthReal[8]}}</p>
            </div>
            <div class="frame-right-img-content  sub-img">
              <img  src=""  ref="img9" class="img-show">
              <p class="img-sign" ref="img-sign9">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput9"
                @change="onChange($event, 9)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
            <div class="img-dist"></div>
            <div class="title-warning">
              <p class="upload-img-title">b面:</p>
              <p class="warining-radious" ref="war10">{{imgLengthIsSuit[9] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info10">图片长度：{{imgLengthReal[9]}}</p>
            </div>
            <div class="frame-right-img-content sub-img" >
              <img  src=""  ref="img10" class="img-show">
              <p class="img-sign" ref="img-sign10">更换图片</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput10"
                @change="onChange($event, 10)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
          </div>
        </div>
        <div class="frame-right-dist"></div>
        <p class="frame-right-mode-title img-mode" style="align-self: flex-start;margin-left: 5%">XX（最低长度要求：14600像素）(成对上传)</p>
        <div class="frame-right-img-size">
          <div class="img-aroud">
              <div class="title-warning">
                <p class="upload-img-title">a面:</p>
                <p class="warining-radious" ref="war11">{{imgLengthIsSuit[10] == false ? '警告：图片长度不符合要求' : ''}}</p>
                <p class="img-info" ref="info11">图片长度：{{imgLengthReal[10]}}</p>
              </div>
              <div class="frame-right-img-content  sub-img">
                <img  src=""  ref="img11" class="img-show">
                <p class="img-sign" ref="img-sign3">更换图片</p>
                <picture-input
                  class="upload-wrapper"
                  ref="pictureInput11"
                  @change="onChange($event, 11)"
                  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                  :crop="false"
                  size="200">
                </picture-input>
              </div>
            <div class="img-dist"></div>
            <div class="title-warning">
              <p class="upload-img-title">b面:</p>
              <p class="warining-radious" ref="war12">{{imgLengthIsSuit[11] == false ? '警告：图片长度不符合要求' : ''}}</p>
              <p class="img-info" ref="info12">图片长度：{{imgLengthReal[11]}}</p>
            </div>
              <div class="frame-right-img-content sub-img" >
                <img  src=""  ref="img12" class="img-show">
                <p class="img-sign" ref="img-sign12">更换图片</p>
                <picture-input
                  class="upload-wrapper"
                  ref="pictureInput12"
                  @change="onChange($event, 12)"
                  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                  :crop="false"
                  size="200">
                </picture-input>
              </div>
          </div>
        </div>
        <div class="frame-right-dist"></div>
        <div class="last-img" >
          <div class="title-warning" style="height: 0;margin: 0">
            <p class="upload-img-title">效果图（可选）</p>
            <p class="warining-radious" ref="war13"></p>
          </div>
          <div class="frame-right-img-content" style="height: 750px;width: 750px;background-color: white">
            <img  src=""  ref="img13" class="img-show">
            <p class="img-sign" ref="img-sign13">更换图片</p>
            <picture-input
              class="upload-wrapper"
              ref="pictureInput13"
              @change="onChange($event, 13)"
              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
              :crop="false"
              size="2000">
            </picture-input>
            <p class="img-sign" style="background-color: red;color: white;right: 100px" @click="deleteImg(13)" ref="img-delete-sign13">删除</p>
          </div>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-footer">
        </div>
      </div>
    </div>
    <div v-show="bindfactory" class="bind-factory">
      <extra-alert class="factory-alert" infotype="框条" @submit-factory="bindedFactory" @close-factory="closefactory"/>
    </div>
  </div>
</template>

<script>
  import PictureInput from '../../components/PictureInput.vue'
  import {mapActions,mapState} from 'vuex'

  export default {
    data() {
      return{
        value1: '0',
        value2: '0',
        value3: '0',
        value4: '0',
        options1:[{value: '1', label: '上架'},{value: '2', label: '下架'}],
        options2:[{value: '1', label: '红色'},{value: '2', label: '黄色'},{value: '3', label: '绿色'}],
        options3:[{value: '1', label: '国画框'},{value: '2', label: '油画框'},{value: '3', label: '婚纱框'}],
        options4: [{value: '1', label: 'VIP'},{value: '2', label: '免费'}],
        infoname: '',
        width: '',
        height: '',
        inout: '',
        imgUrlArray: ["","","","","","","","","","","","",""],
        imgLengthSuitLength: ["375","375","2000","2000","3200","3200","6100","6100","8600","8600","14600","14600",""],
        imgLengthReal: ["","","","","","","","","","","","",""],
        imgLengthIsSuit:[true,true,true,true,true,true,true,true,true,true,true,true,true],
        bindfactory: false,
        uploadImgCount: 12,
        imgid: '',
        seqid: '',
        factoryid: '',
        factoryname: ''
      }
    },
    components: {
        PictureInput
    },
    mounted() {
        this.$store.state.navTitle = '新建框条'
    },
    methods: {
      ...mapActions([
        'uploadFrame',
        'updateFrame'
      ]),
      deleteImg(i){
        let imgShow = this.$refs['img' + i]
        imgShow.src = ''
        let oFile = this.$refs['pictureInput' + i]
        oFile.removeImage();
        this.imgUrlArray[i - 1] = ''
      },
      onChange (rotate, i) {
        // rotate：拿到需旋转的角度,如果不需要旋转值为false
        // this.$refs.pictureInput.file拿到file对象
        let self = this
        let oFile = this.$refs['pictureInput' + i]['file']
        // let imgCode = this.$refs['pictureInput' + i]['image']
        let oReader = new FileReader()
        oReader.readAsDataURL(oFile)
        oReader.onloadend = function () {
          let data = {}
          let img = document.createElement('img')
          img.onload = function () {
//            self.$store.state.uploadData.uploadImages[i] = ImageCompress.getBlobImage(this, 0.5, 1.0, rotate)
            /* // 测试：显示画布旋转后的图
             let imgShow1 = self.$refs['test']
             imgShow1.src = ImageCompress.getBlobImage(this, 0.5, 1.0, rotate) */
            self.imgLengthReal[i - 1] = String(img.width)
            if(i < 3){

            }else if (i >= 3 && i < 13){
              if (img.width < self.imgLengthSuitLength[i - 1]){
                self.imgLengthIsSuit[i - 1] = false
              }else{
                self.imgLengthIsSuit[i - 1] = true
              }
              let warning = self.$refs['war' + i]
              warning.innerHTML = self.imgLengthIsSuit[i - 1] === false ? '警告：图片长度不符合要求' : ''
              let length = self.$refs['info' + i]
              length.innerHTML = '图片长度：' + self.imgLengthReal[i - 1]

            }else if(i == 13){

            }
          }
          img.src = this.result

          // 显示样式图片到框内
          let imgShow = self.$refs['img' + i]
          imgShow.src = this.result
          imgShow.onload = function () {
//              console.log(img.width)

          }
//          self['show' + i] = false
        }
      },

      closefactory(){
        this.bindfactory = false
      },
      deletefactory(){
        this.factoryid = ''
        this.factoryname = ''
        this.seqid = ''
      },
      bindedFactory(text,val){
          console.log(text)
        console.log(val)
          if(text.length > 0 && val.length > 0){
            this.seqid = text
            let item = this.$store.state.factory.factoryOptionsData[val]
            this.factoryid = item.factoryid
            this.factoryname = item.factoryname
            this.bindfactory = false
          }else{
            this.$dialog.toast({
              mes:'请先填写必要信息',
              timeout: 1000
            })
          }
      },

      alertfactory(){
        this.bindfactory = true
      },

      save(){
          //验证信息
        for (var i = 1; i <= 8; i ++){
            let oFile = this.$refs['pictureInput' + i]['file']
            if(!oFile && i != 2 && i != 13){
              this.$dialog.toast({
                mes:'请先上传所有必需的图片（带*标识与）',
                timeout: 1000
              })
              return
            }
        }
        for(var i = 0; i < this.imgLengthIsSuit.length; i++){
            let sub = this.imgLengthIsSuit[i]
          if(sub == false){
            this.$dialog.toast({
              mes:'请替换不符合尺寸要求的图片',
              timeout: 1000
            })
            return
          }
        }
        if(this.value1 == '0' || this.value2 == '0' || this.value3 == '0' || this.value4 == '0'){
          this.$dialog.toast({
            mes:'请先选择左侧的重要选项',
            timeout: 1000
          })
          return
        }
        if(this.infoname.length == 0 || this.width.length == 0 || this.height.length == 0 ||this.inout.length == 0){
          this.$dialog.toast({
            mes:'请先填写必要信息',
            timeout: 1000
          })
          return
        }

//        if (this.$refs['pictureInput13']['file']){
//            this.uploadImgCount = 13
//        }else{
//            this.uploadImgCount = 12
//        }
////        if (this)
        this.$dialog.loading.open('上传图片中，请稍候')
        console.log('上传')
        this.upload(1)
      },
      upload(i){
        console.log('upload')
        if(i == this.uploadImgCount + 1){
          this.saveNext()
          return
        }
        let oFile = this.$refs['pictureInput' + i]['file']
        var form = new FormData();
        if (!oFile){
          i += 1;
          this.upload(i)
          return
        }
        form.append('file',oFile)
        this.uploadFrame(form)
          .then(data => {
            this.imgUrlArray[i - 1] = data.result.url
//            console.log(data.result.url)
//            if(i == 1){
//                this.imgid = data.result.id
//            }
//            if (i == this.uploadImgCount){
//                console.log(this.imgUrlArray)
//              this.saveNext()
//            }else{
              i += 1;
              this.upload(i)
//            }
          })
          .catch(err => {
            this.$dialog.loading.close();
            this.$dialog.toast({
              mes:'图片上传失败，请重新尝试',
              timeout: 1000
            })
            return
          })
      },
      saveNext(){
          let info = {
              jt: this.imgUrlArray[0],
              czjmt: this.imgUrlArray[1],
              sa: this.imgUrlArray[2],
              sb:this.imgUrlArray[3],
              ma: this.imgUrlArray[4],
              mb: this.imgUrlArray[5],
              la: this.imgUrlArray[6],
              lb:this.imgUrlArray[7],
              xla: this.imgUrlArray[8],
              xlb: this.imgUrlArray[9],
              xxla: this.imgUrlArray[10],
              xxlb: this.imgUrlArray[11],
              width: this.width,
              height: this.height,
              inout: this.inout,
              factoryname: this.factoryname
          }
          if(this.uploadImgCount == 13){
              info['xgt'] = this.imgUrlArray[12]
          }
//          info = JSON.stringify(info)
          info = JSON.stringify(info)
          let detail = {
              action: 'add',
            state: this.options1[Number(this.value1) - 1].label,
            color: this.options2[Number(this.value2) - 1].label,
            style: this.options3[Number(this.value3) - 1].label,
            paytype: this.options4[Number(this.value4) - 1].label,
            factory: this.factoryid,
            id: this.imgid,
            name: this.infoname,
            info: info,
            createtime: Date.now(),
            seqnumber: this.seqid
          }

            this.updateFrame(detail)
            .then(data => {
              this.$dialog.loading.close();
              this.$router.go(-1)
              this.$dialog.toast({
                mes: '框条保存成功',
                icon: 'success',
                timeout: 1000
              })
            })
            .catch(err => {
              this.$dialog.loading.close();
              this.$dialog.toast({
                mes: '框条保存失败',
                icon: 'fail',
                timeout: 1000
              })
            })
      },
      close(){
          this.$router.go(-1);
      }
    },

  }
</script>


<style scoped>
  .img-dist{
    width: 100%;
    height: 1px;
    background-color: #C8C8C9;
    margin-top: 18px;
  }
  input{
    background-color: white;
  }
  .last-img{
    width: 90%;
    margin-top: 30px;
  }
  .m-mb-10{
    margin-top: 10px;
  }
  .sub-img{
    width: 100% !important;
    height: 100px !important;
    margin-top: 10px !important;
  }
  .warining-radious{
    font-size: 12px;
    color: red;
    margin-left: 20px;
  }
  .img-info{
    font-size: 12px;
    color: #303641;
    margin-left: auto;
  }
  .img-mode{
    margin-top: 22px;
    margin-bottom: 19px;
  }
  .title-warning{
    width: 100%;
    display: flex;
    display: -webkit-flex;
    margin-top: 20px;
    height: 17px;
  }
  .img-aroud{
    width: 100%;
    padding-left: 10pt;
    padding-right: 10pt;
    height: 325px;
    background-color: white;
    border:1pt solid #C8C7CC;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    /*align-items: c;*/

  }
  .frame-right-img-size{
    width: 90%;
    height: 325px;
  }
  .upload-wrapper {
    width: 100%;
    height: 100%;
    /*background-color: aqua;*/
    position: absolute;
    left: 0;
    top: 0;
  }
  .frame-right-img-content{
    width: 350px;
    height: 350px;
    background-color: #F2F2F2;
    margin-top: 20pt;
    position: relative;
  }
  .img-show{
    left: 0;
    top:auto;
    bottom: auto;
    width: 100%;
    position: absolute;
    /*background-color: aqua;*/
  }
  .img-sign{
    font-size: 12px;
    color: white;
    background-color: #39B866;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin:0;
  }

  .upload-img-title{
    font-size: 12px;

  }
  .frame-right-radious{
    width: 350px;
    height: 377px;
    /*display: flex;*/
    /*display: -webkit-flex;*/
    /*justify-content: space-between;*/
  }

  .frame-right-img-sep{
    width: 90%;
    margin-top: 30px;
    height: 377px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }

  body{
    background-color: #F2F2F2;
  }
  /*顶部*/
  .frame-header{
    width: 100%;
    height: 100px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }

  /*内容*/
  .frame-content{
    width:100%;
    display: flex;
    display: -webkit-flex;
  }
  /*左边*/
  .frame-left{
    width: 30%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .frame-left-add-factory{
    color: #39B866;
    font-size: 12px;
    align-self: flex-start;
    margin-top: 20px;
    margin-left: 10%;
  }
  .frame-left-operation{
    font-size: 16px;
    width: 80%;
    height: 50px;
    border-radius: 3pt;
    border:0;
    margin-top: 50px;
  }

  input::-ms-input-placeholder{
    text-align: left;
  }
  input::-webkit-input-placeholder{
    text-align: left;
  }
  .frame-left-dist{
    width: 80%;
    background-color: #C8C8C9;
    height: 1px;
  }

  .frame-left-category{
    margin:5pt;
    width: 80%;
    height: 25pt;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1pt;
    border-color: #C8C8C8;
  }
  .category-title{
    margin-left: 10pt;
    font-size: 7pt;
    color: #303641;
  }
  .category-value{
    margin-right: 10pt;
    font-size: 7pt;
  }

  /*右边*/
  .frame-right{
    width: 70%;
    /*height: 2200pt;*/
    /*background-color: white;*/
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .frame-right-mode{
    width: 90%;
    height: 77px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 0px;
    margin-top: 30px;
  }

  .frame-right-mode-title{
    color: #303641;
    font-size: 12px;
    /*margin-top: 22px;*/
    /*margin-bottom: 19px;*/
  }
  .frame-right-mode-input{
    width: 100%;
    height: 50px;
    text-align: left;
    padding-left: 10pt;
    border: 1px solid #C8C7CC;
    line-height: 30pt;
    font-size: 14px;
  }

  .frame-right-dist{
    width: 90%;
    height: 1px;
    margin-top: 30px;
    padding-bottom: 25pt;
    padding: 0;
    background-color: #C8C8C9;
  }

  .frame-right-header{
    height:0px;
    width: 90%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: row;
  }

  .frame-right-footer{
    width: 90%;
    height: 40pt;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }



</style>
